<template>
	<view class="integral">
		<view class="navTable">
			<view class="navTime" :class="navIndex == index ? 'navTimeActive' : ''" v-for="(item, index) in navTable" :key="index">{{item}}</view> 
		</view>
		<view class="recordList">
			<view class="recordListTime" v-for="(item, i) in recordList" :key="i">
				<view class="itemTime">{{item.createTime}}</view>
				<view class="classifyBox">
					{{item.historyIntegral}}
				</view>
				<view class="classifyBox">
					{{item.geographyIntegral}}
				</view>
				<view class="classifyBox">
					{{item.botanyIntegral}}
				</view>
				<view class="classifyBox">
					{{item.animalIntegral}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				navTable: ['时间', '历史', '地理', '植物', '动物'],
				navIndex: null,
				recordList: {}
		  }
		},
		computed: {
			...mapState(['dayTimeStorageData'])
		},
		mounted() {
			// this.recordList = this.dayTimeStorageData
			this.userRecord()
		},
		methods: {
			userRecord() {
				let userInfo = uni.getStorageSync('userInfo')
				this.$http.userRecord({userId: userInfo.userId}).then(res => {
					this.recordList = res
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.navTable{
		position: sticky;
		/*  #ifdef H5 */
		top: 80rpx;
		/*  #endif  */
		left: 0;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		box-shadow: -10rpx 0rpx 10rpx #ddd;
		background-color: #fff;
		.navTime{
			width: 150rpx;
			text-align: center;
		}
		.navTimeActive{
			color: #3396ff;
		}
	}
	.recordListTime{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 20rpx 0 ;
		border-bottom: 1px solid #ddd;
		.itemTime{
			width: 160rpx;
			text-align: center;
		}
		.classifyBox{
			// display: flex;
			// align-items: center;
			width: 150rpx;
			text-align: center;
		}
	}
	
</style>
